const drag =  (el) => {
    let isDragging = false
    let x = 0
    let y = 0
    el.addEventListener('mousedown', () => {
        x = 0
        y = 0
        isDragging = true
    })
    el.addEventListener('mouseup', () => {
        isDragging = false
    })
    el.addEventListener('mouseout', () => {
        isDragging = false
    })
    el.addEventListener('mousemove', e => {
        if (isDragging) {
            let oldX = x
            let oldY = y
            x = e.clientX
            y = e.clientY
            if (oldX && oldY) {
                let deltaX = x - oldX
                let deltaY = y - oldY
                console.log(deltaX, deltaY)
                setStyle(el, deltaX, deltaY)
            }
        }
    })
    const setStyle = (el, x, y) => {
        let top = parseFloat(window.getComputedStyle(el)['top'])
        let left = parseFloat(window.getComputedStyle(el)['left'])
        el.style.left = (left + x) + 'px'
        el.style.top = (top + y) + 'px'
        // let transform = window.getComputedStyle(el)['transform']
        // if (transform === 'none') {
        //     transform = 'matrix(1, 0, 0, 1, 0, 0)'
        // }
        // let matrix = transform.match(/matrix\(([\d\s,]+)\)/)
        // let arr = matrix[1].split(/,\s/g)
        // arr[4] = parseFloat(arr[4]) + x
        // arr[5] = parseFloat(arr[5]) + y
        // el.style.transform = 'matrix(' + arr.join(',') + ')'
    }
}
drag(document.querySelector('#test'))